<template>
  <div class="slider-container">
    <a-layout-sider class="slider-box" v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <p v-if="!collapsed">同驰软件MIS系统</p>
        <img v-else src="../../assets/img/logo.jpg" alt="">
      </div>
      <menu-item />
    </a-layout-sider>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import menuItem from '@/components/layout/MenuItem'
export default {
  components: {
    menuItem
  },
  data () {
    return {
      menuList: [
        {
          name: '仓储管理',
          icon: 'cluster',
          children: [
            {
              name: '配货管理',
              children: [
                {
                  name: '单据管理'
                }
              ]
            },
            {
              name: '出货管理'
            }
          ]
        },
        {
          name: '系统管理',
          icon: 'tool'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      'collapsed': state => state.system.collapsed
    })
  }
}
</script>
<style lang="scss">
.slider-container {
  .slider-box {
    height: 100%;
  }
  .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
    p {
      line-height: 32px;
      text-align: center;
      color: #fff;
      font-weight: 500;
    }
    img {
      height: 32px;
      display: block;
      margin: 0 auto;
    }
  }
}
</style>
